<template>
<div class="app-container">
  <el-form :model="form" >
    <el-row>
      <div class="demo-input-suffix">
        一级服务类目:
        <el-input v-model="form.title" placeholder="请输入一级服务类目"></el-input>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="toOne">新增一级分类</el-button>
        <el-button type="primary" @click="toTwo">新增二级分类</el-button>
      </div>
    </el-row>
  </el-form>

  <el-table :data="tableData" id="out-table">
    <el-table-column type="selection" width="55" align="center"></el-table-column>
    <el-table-column type="index" width="50" align="center"></el-table-column>
    <el-table-column
      v-for="item in tableList"
      :key="item._id"
      :prop="item.value"
      :label="item.name"
      align="center">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="warning"
          @click="go(scope.$index)">隐藏</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="goTwo(scope.$index)">查看二级分类</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-button class="upload" @click="exportExcel">导出excal
    </el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
  </div>
</div>
</template>

<script>
  import { formatDate } from '@/utils/index'
  import { Excel } from '@/utils/validate'
  import request from '@/utils/request'
  function getListData(objData) {
    return request({
      url: '/v1/classify',
      method: 'post',
      data: objData
    })
  }
  export default {
    created: function(){
      const obj = {
        page: 1,
        size: 10,
        classify_type: 1
      }
      this.getList(obj)
    },
    methods: {
      getList(item) {
        getListData(item).then(res => {
          if (res.code === 200) {
            console.log(res);
            if (res.data.list.length) {
              this.setTableData = res.data.list
              this.totals = res.data.totalNumber
              res.data.list.filter(item => {
                const val = {
                  title: item.classify_name,
                  time: item.create_time ? formatDate(new Date(item.create_time*1000), 'yyyy-MM-dd hh:mm') : '无',
                  person: '无',
                  state: this.isDelete(item.is_delete),
                  _id: item._id
                }
                this.tableData.push(val)
              })
              console.log(this.tableData);
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      handleSizeChange(val) {
        this.tableData = []
        let obj = {
          page: 1,
          size: val,
          classify_type: 1
        }
        this.size = val
        this.getList(obj)
      },
      handleCurrentChange(val) {
        this.tableData = []
        let obj = {
          page: val,
          size: this.size,
          classify_type: 1
        }
        this.getList(obj)
      },
      onSubmit() {
        this.tableData = []
        const n = {
          page: 1,
          size: this.size,
          lassify_type: 1,
          classify_name: this.form.title
        }
        this.getList(n)
      },
      exportExcel() {
        Excel('#out-table')
      },
      toOne(){
        this.$router.push('/serverList/ServerAddOne')
      },
      toTwo(){
        this.$router.push('/serverList/ServerAddTwo')
      },
      goTwo(i){
        this.$router.push({
          name: 'ServerTwo',
          query: {
            _id: this.tableData[i]._id ,
            name: this.tableData[i].title
          }
        })
      },
      isDelete: function (value) {
        if (value == 1) return '正常'
        else if (value == 2) return '已隐藏'
      }
    },
    filters: {

    },
    data() {
      return {
        form: {
          type: '',
          date1: '',
          date2: '',
          type: '',
          state:''
        },
        tableList:[
          { name: '一级服务', value: 'title' },
          { name: '一级服务分类添加时间', value: 'time' },
          { name: '添加人', value: 'person' },
          { name: '状态', value: 'state' }
        ],
        tableData: [],
        currentPage: 1,
        size: 10,
        totals: 0
      }
    }
  }
</script>
<style scoped>
  .el-col{
    margin: 5px;
  }
  .el-row{
    margin: 10px 0;
  }
  .demo-input-suffix div{
    margin-right: 10px;
  }
  .el-table{
    margin-bottom: 10px;
  }
  .upload{
    float: right;
  }
  .el-input{
    width: 200px;
  }
</style>
